<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>音频详情</title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/audio-details.css"/>
		<script src="js/jquery-2.2.3.js" type="text/javascript"></script>
		<script src="js/public.js" type="text/javascript"></script>
		<script src="js/swiper.min.js"></script>
	</head>
	<body>
		<!--导航栏-->
		<header>
			<div class="header-inner">
				<div class="header-logo">
					<a><img src="img/logo_btn@2x.png"/></a>
				</div>
				<div class="header-nav">
					<a><img src="img/more_btn@2x.png"/></a>
				</div>
				<ul>
						<li><a>登录</a>/<a>注册</a></li>
						<li><a class="active">迷笛音频</a></li>
						<li><a>新闻动态</a></li>
						<li><a>app下载</a></li>
						<li><a>曲谱教程</a></li>
						<li><a>迷笛先生</a></li>
						<li><a>MIDICLUB</a></li>
						<li><a>关于我们</a></li>
						<li><a>退出</a></li>
					</ul>
			</div>
		</header>
		<!--头部导航栏结束-->
		<!--首页第一个轮播图开始-->
		<section>
			<div class="section-inner">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a><img src="img/banner@2x.png"/></a>
						</div>
						<div class="swiper-slide">
							<a><img src="img/banner-4@2x.png"/></a>
						</div>
						<div class="swiper-slide">
							<a><img src="img/banner-2@2x.png"/></a>
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
		</section>
		<!--音乐播放器开始-->
		<div class="button-wrapper">
			<button id="btn1" onclick="click1()" class="btn select">原曲</button>		    		    	<button id="btn2" onclick="click2()" class="btn">伴奏</button>		    		</div>
		<div class="player">
			<audio src="/Upload/audio/201702/27/58b39de2e68d4.mp3" id="audio"></audio>
			<div class="gongneng">
            	<ul>
            		<!-- <li class="left"><a><img src="/Public/midi/mb-img/shangyiqu.png"/></a></li> -->
            		<li class="mid"><a><img src="img/bofang.png" id="musicAudioPlayAndPause" onclick="playOrPaused(this);"/></a></li>
            		<!-- <li class="right"><a><img src="/Public/midi/mb-img/xiayiqu.png"/></a></li> -->
            	</ul>
            </div>
		    <div class=music-main>
		        <p>GT1-01 灵  动 Ease Over</p>
		    	<div id="musicAudio">
                <span id="currentTime">00:00</span>
                <div id="musicAudioProgressPar">
                    <div id="musicAudioProgress">
                    	<img src="img/bofang_yuan(1).png" id="pro-yuan"/>
                    </div>
                </div>
                <span id="totalTime">03:56</span>
            </div>
		    </div>
		</div>
		<div class="bk"></div>
		<!--音乐播放器结束-->
		<div class="title">
			<p>音频简介</p>
		</div>
		<p class="introduce">
			这首曲子的伴奏是以放克（Funk）为底的形式出现的，旋律并不是很跳跃，演奏的时候应多听伴奏的感觉。主要是练习E自然小调的第一把位音阶，建议在练习的时候右手拨片全部使用下拨的形式。旋律节奏方面主要是以四分音符为主，尽可能地将时值演奏得饱满。		</p>
		<script>
		    
	    		 var myswiper = new Swiper(".section-inner .swiper-container",{
	    		 	autoplay:{
					    stopOnlastSlide:true,
				    },
				    loop:true,
				    pagination:{
					   el:'.swiper-pagination',
				     }
	             });
			var audio;
			var isdrag = false;
      		var tx,x;
	        var musicbar = document.getElementById("musicAudioProgressPar");
	        var playedbar = document.getElementById("musicAudioProgress");
	        var proyuan = document.getElementById("pro-yuan");
	        var musicwidth = musicbar.clientWidth;
			window.onload = function(){
				initAudio();
        // 进度条点击事件
         musicbar.onclick = function(event){
            var newCurrentime = (event.offsetX / musicwidth) * audio.duration;
            audio.currentTime = newCurrentime;
            var playedwidth = (audio.currentTime / audio.duration) * musicwidth;
            playedbar.style.width = playedwidth + "px";
            // proyuan.style.left = playedwidth + "px";
        }
         playedbar.onclick = function(event){
            var newCurrentime = (event.offsetX / musicwidth) * audio.duration;
            audio.currentTime = newCurrentime;
            var playedwidth = (audio.currentTime / audio.duration) * musicwidth;
            playedbar.style.width = playedwidth + "px";
            // proyuan.style.left = playedwidth + "px";
        }
        document.getElementById("musicAudioProgress").addEventListener('touchend',function(){
	        isdrag = false;
	    });
	    document.getElementById("musicAudioProgress").addEventListener('touchstart',selectmouse);
	    document.getElementById("musicAudioProgress").addEventListener('touchmove',movemouse);

              $('#musicAudioProgress').slider({
                      value: 0,
                     orientation: "horizontal",
                     range: "min",
                     animate: true,
                     step: 1
                 });


			}
			var initAudio = function(){
//				初始化对象
               audio = document.getElementById('audio');
               var audiolen;
               audio.addEventListener('canplay',function(){
               	  audiolen = audio.duration;
               	  var totalTime = parseInt(audiolen/60);
               	  var seconds = parseInt(audiolen%60);
               	     if(totalTime == 0){
               	     	if(seconds>9){
               	     		totalTime = "00:"+seconds;
               	     	}else{
               	     		totalTime ="00:0"+seconds;
               	     	}
               	     }else{
               	     	var totalTimePre,totalTimeNext;
               	     	if(totalTime>9){
               	     		totalTimePre = totalTime;
               	     	}else{
               	     		totalTimePre = "0"+totalTime;
               	     	}
               	     	if(seconds>9){
               	     		totalTimeNext=seconds;
               	     	}else{
               	     		totalTimeNext = "0"+seconds;
               	     	}
               	     	totalTime = totalTimePre+":"+totalTimeNext;
               	     }
               	     document.getElementById("totalTime").innerText = totalTime;
                   })
//                 初始化当前时间
                   getCurrentTime();
			}
//			更新进度条当前值
            function updateProgressVal(){
            	var zongkuan = $("#musicAudioProgressPar").width();
            	var progressVal = audio.currentTime/audio.duration*zongkuan;
            	document.getElementById("musicAudioProgress").style.width = (progressVal)+"px";
            }
//          更新当前时间
            function getCurrentTime(){
            	var currentTime = audio.currentTime;
            	var totalTime = parseInt(currentTime/60);
            	var seconds = parseInt(currentTime%60);
            	if(totalTime == 0){
            		if(seconds>9){
            			totalTime = "00:"+seconds;
            		}else{
            			totalTime = "00:0"+seconds;
            		}
            	}else{
            		var totalTimePre,totalTimeNext;
            		if(totalTime>9){
            			totalTimePre = totalTime;
            		}else{
            			totalTimePre="0"+totalTime;
            		}
            		if(seconds>9){
            			totalTimeNext = seconds;
            		}else{
            			totalTimeNext = "0"+seconds;
            		}
            		totalTime = totalTimePre+":"+totalTimeNext;
            	}
            	document.getElementById("currentTime").innerText = totalTime;
            }
//         暂停和播放
           var progressTimer;
           function playOrPaused(obj){
           	if(audio.paused){
           		audio.play();
           		progressTimer = window.setInterval(audioProgress,100);
           		document.getElementById("musicAudioPlayAndPause").setAttribute("src","/Public/midi/mb-img/zanting.png");
           		return;
           	}
           	audio.pause();
           	document.getElementById("musicAudioPlayAndPause").setAttribute("src","/Public/midi/mb-img/bofang.png");
           }

            function audioProgress(){
            	if(audio.currentTime<audio.duration){
            		if(audio.played){
            			getCurrentTime();
            			updateProgressVal();
            		}
            	}else{
            		audio.currentTime = 0;
                audio.play();
            	}
            }


			function click1(){
				$('#audio').attr('src','/Upload/audio/201702/27/58b39de2e68d4.mp3');
				$('.select').removeClass('select');
				$('#btn1').addClass('select');
				$("#musicAudioPlayAndPause").attr("src","/Public/midi/mb-img/bofang.png");
			}
			function click2(){
				$('#audio').attr('src','/Upload/audio/201702/27/58b39de2e8b80.mp3');
				$('.select').removeClass('select');
				$('#btn2').addClass('select');
				$("#musicAudioPlayAndPause").attr("src","/Public/midi/mb-img/bofang.png");
			}
			function click3(){
				$('#audio').attr('src','');
				$('.select').removeClass('select');
				$('#btn3').addClass('select');
				$("#musicAudioPlayAndPause").attr("src","/Public/midi/mb-img/bofang.png");
			}

			function movemouse(e){
		          if (isdrag){
		          var n = tx + e.touches[0].pageX - x;
		          var touchcurrenttime = (n/musicwidth)*audio.duration;
		          audio.currentTime = touchcurrenttime;
		          var touchwidth = (audio.currentTime/audio.duration)*musicwidth;
		            $("#musicAudioProgress").css("width",touchwidth);
		             return false;
		           }
		      }

		      function selectmouse(e){
		           isdrag = true;
		          tx = parseInt(document.getElementById("musicAudioProgress").style.width+0);
		          x = e.touches[0].pageX;
		          return false;
		       }

		</script>
	</body>
</html>